<template>
  <div class="consumer-page activity-list-page" v-loading="loadingImage">
    <!--头部标题-->
    <el-breadcrumb separator=">" class="page-title">
      <el-breadcrumb-item :to="{ path: 'phoneIndex' }">Phone model</el-breadcrumb-item>
      <el-breadcrumb-item>New</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="submitForm" size="mini" ref="submitForm" :rules="rules"
                 class="demo-ruleForm main-search-box">
          <el-row>
            <el-form-item label="Status" style="width: 200px;margin-right: 10px" prop="status">
              <el-select style="width: 200px;" class="editStyle" v-model="submitForm.status">
                <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!--brand-->
          <el-row>
            <el-form-item label="Brand" style="width: 200px;margin-right: 10px" prop="brand">
              <el-select style="width: 200px" v-model="submitForm.brand">
                <el-option v-for="i in brandData" :key="i.id" :label="i.value" :value="i.id"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!--Model-->
          <el-row>
            <el-form-item
              label="Model"
              style="width: 400px"
              prop="model"
            >
              <el-input v-model="submitForm.model"></el-input>
            </el-form-item>
          </el-row>
          <!--website link-->
          <el-row>
            <el-form-item
              label="gsmarena website link"
              style="width: 400px"
              prop="link"
            >
              <el-input v-model="submitForm.link"></el-input>
            </el-form-item>
          </el-row>
          <!--提交信息或取消提交-->
          <el-row :gutter="40" type="flex" justify="left" style="padding:40px 0;">
            <el-col :span="6">
              <el-button @click.native="cancelPutForm" size="medium" style="width:100%" type="info">
                Cancel
              </el-button>
            </el-col>
            <el-col :span="6">
              <el-button @click.native="uploadSubmitForm"
                         size="medium" type="success" style="width:100%">
                Save
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {editPhoneInfo, newAddPhoneInfo, getPhoneBrand,getPhoneInfo} from '../../api/guc_api.js';
  import Qs from 'qs';

  export default {
    name: 'phoneNew',
    data() {
      return {
        submitForm: {
          //默认为active
          status: 1,
          brand: '',
          model: '',
          link: '',
        },
        //仓库状态数据
        statusOption: [
          {
            label: 'Active',
            value: 1,
          },
          {
            label: 'Delete',
            value: 0,
          }
        ],
        brandData: [],
        //加载动画
        loadingImage: false,
        goodsId:'',
        isNewCreate: true,
        //校验
        rules: {
          status: [
            {required: true, message: 'title is required', trigger: 'change'}
          ],
          brand: [
            {required: true, message: 'please select category1', trigger: 'change'}
          ],
          model: [
            {required: true, message: 'model is required', trigger: 'blur'}
          ],
          link: [
            {required: true, message: 'link is required', trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      //错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //成功消息提示
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'success'
        })
      },
      // 取消提交
      cancelPutForm() {
        this.$router.go(-1)
      },
      //初始化表单
      initForm() {
        this.loadingImage = true
        getPhoneInfo({id: this.goodsId})
          .then(res => {
            this.loadingImage = false
            if(res.data.errorID==0){
              let obj = res.data.object
              this.submitForm.status = obj.status
              this.submitForm.brand = obj.brand
              this.submitForm.link = obj.gsmarenaWebsite
              this.submitForm.model = this.$translateLang(obj.model || '', 'unicodeTozawgyi') || ''
            }
            else{
              this.messageToastErr(res.data.message)
            }
          })
          .catch(err => {
            this.loadingImage = false
            console.log(err)
          })
      },
      // 正常提交
      uploadSubmitForm() {
        //验证表单信息
        this.$refs['submitForm'].validate((valid) => {
          if (!valid) {
            this.messageToastErr('Wrong Submit')
            return false
          }
          else {
            this.loadingImage = true
            let formAjaxData={}
            //对submitform中输入框的内容进行转码
            formAjaxData.status = this.submitForm.status
            formAjaxData.brandId = this.submitForm.brand
            formAjaxData.model = this.$translateLang(this.submitForm.model || '', 'zawgyiTounicode') || ''
            formAjaxData.gsmarenaWebsite = this.submitForm.link
            let config = {
              'Content-Type': 'multipart/form-data'
            }
            //编辑
            if (!this.isNewCreate) {
              //添加goodsId字段
              formAjaxData.id = this.goodsId
              //添加被删除图片id组成的数组 images字段
              let params = Qs.stringify(formAjaxData)
              editPhoneInfo(params, config)
                .then((res) => {
                  this.loadingImage = false
                  if (res.data.errorID === 0) {
                    this.messageToastSuccess('Edit Success')
                    this.$router.push('/phoneIndex')
                  }
                  else {
                    this.messageToastErr(res.data.message)
                  }
                })
                .catch((error) => {
                  this.loadingImage = false
                  this.messageToastErr('error,please try again later')
                })
            }
            // 没有id就是新增
            else {
              let params = Qs.stringify(formAjaxData)
              newAddPhoneInfo(params, config)
                .then((res) => {
                  this.loadingImage = false
                  if (res.data.errorID === 0) {
                    this.messageToastSuccess('New Create Success')
                    this.$router.push('/phoneIndex')
                  }
                  else {
                    this.loadingImage = false
                    this.messageToastErr(res.data.message)
                  }
                })
                .catch((error) => {
                  console.log(error)
                  this.loadingImage = false
                })
            }
          }
        })

      },
      //获取brand数据
      getBrand(){
        getPhoneBrand()
          .then(res=>{
            if(res.data.errorID==0){
              this.brandData=res.data.object
            }
            else{
              this.messageToastErr(res.data.message)
            }
          })
          .catch(err=>{
            console.log(err)
          })
      }
    },
    mounted() {
      window.scrollTo(0, 0)
      this.getBrand()
      this.goodsId = this.$route.query.id || ''
      if (this.goodsId) {
        this.isNewCreate = false
        this.initForm()
      }
    },
  };
</script>

<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    border-bottom: 1px solid #eee;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

</style>
